<script  setup>
import { ref,onMounted } from 'vue';
import {QueryPageApi,AddDataApi,DeleteApi,UpdateApi} from '@/api/warehouse'
import { ElMessage} from 'element-plus'

const dialogVisible=ref(false)
const edit = ref(false)
const currentEnditId=ref(null)
const tableData = ref([]) 
const handleEdit=(index,row)=>{
  dialogVisible.value=true
  edit.value=true
  currentEnditId.value=row.id
  disForm.value={...row}
}
const currentPage=ref(1)
const pageSize=ref(10)
const total=ref(0)

const handleSizeChange=(val)=>{
  pageSize.value=val
  search()
}
const handleCurrentChange=(val)=>{
  currentPage.value=val
  search()
}
const handleDelete=async(index,row)=>{
let res=await DeleteApi(row.id)
if(res){
  ElMessage.success("删除成功")
  search()
}else{
  ElMessage.error("删除失败")
}

}

const disForm=ref(
  {
  name:'',
  cityName:'',
  provinceId:'',
  provinceName:'',
  address:'',
  location:'',
  personChargeName:'',
  sort:'',
  createTime:''
  })


const save=async()=>{
  let result
  if(edit.value){
    result=await UpdateApi({
      ...disForm.value,
      id: currentEnditId.value
    })
  }else{
    result=await AddDataApi(disForm.value)
  }
  dialogVisible.value=false
  if(!result){
    ElMessage.error(edit.value?"更新失败":"新增失败")
  }else{
    ElMessage.success(edit.value?"更新成功":"新增成功")
    dialogVisible.value=false
  }
 edit.value=false
  
}
const insert=async()=>{
dialogVisible.value=true
disForm.value={
    name:'',
    cityName: '',
    provinceId: '',
    provinceName: '',
    address: '',
    location: '',
    personChargeName: '',
    sort: '',
    createTime: '',
    create_by:''  
}
}
const search = async() => {
  try {
    const params = {
      name: form.value.name,
      cityName: form.value.cityName,
      PersonChargeName: form.value.PersonChargeName,
      pageNum: currentPage.value,
      pageSize: pageSize.value
    }
    
    const result = await QueryPageApi(params)
    console.log('API返回数据:', result) // 调试用
    
    // 适配你的数据结构 { code, data: { list, total } }
    if (result.code === 1) { // 假设 code=1 表示成功
      tableData.value = result.data.list || []  // 使用 data.list 而不是 rows
      total.value = result.data.total || 0
    } else {
      ElMessage.error(result.msg || "获取数据失败")
    }
  } catch (error) {
    console.error('请求失败:', error)
    ElMessage.error('网络错误，请稍后重试')
  }
}


const form=ref({
  name:'',
  cityName:'',
  PersonChargeName:''
})


 onMounted(() => {
  search()
})

</script>

<template>
  



  <div class="warehouse-background">
 <el-form :model="form" :inline="true"  label-width="auto" style="max-width: 600px">

    <el-form-item >
      <el-input v-model="form.name"  placeholder="仓库名称"/>
    </el-form-item>
     <el-form-item >
      <el-input v-model="form.cityName"  placeholder="所在城市"/>
    </el-form-item>
     <el-form-item >
      <el-input v-model="form.PersonChargeName" placeholder="负责人"/>
    </el-form-item> 
    <el-form-item >
    <el-button type="success" @click="search()">搜索</el-button>
    </el-form-item>
      <el-form-item >
    <el-button type="success" @click="insert()">+</el-button>
    </el-form-item>
    </el-form>
    
    <!--表格数据-->
   <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="id" type="index" label="#" width="55px" />
    <el-table-column type="selection" width="55px" />
    <el-table-column prop="name" label="仓库名称" width="55" />
    <el-table-column prop="cityName" label="所在城市" width="55" />
    <el-table-column prop="provinceId" label="省份Id" />
    <el-table-column prop="address" label="详细地址" />
    <el-table-column prop="provinceName" label="省份名称" />
    <el-table-column prop="location" label="经纬度" />
    <el-table-column prop="personChargeName" label="负责人名字" />
    <el-table-column prop="createTime" label="创建时间"/>
    <el-table-column prop="create_by" label="创建人账号" />
   <el-table-column prop="saasId" label="是否有效">
    <template #default="scope">
      <el-tag v-if="scope.row==1">是</el-tag>
      <el-tag v-else>否</el-tag>
    </template>
   </el-table-column>
   <el-table-column label="操作">
      <template #default="scope">
        <el-button size="small" @click="handleEdit(scope.$index, scope.row)">
          修改
        </el-button>
        <el-button
          size="small"
          type="danger"
          @click="handleDelete(scope.$index,scope.row)"
        >
          删除
        </el-button>
      </template>
    </el-table-column>
  </el-table>

  <!--弹窗-->
  <el-dialog
    v-model="dialogVisible"
    :title=" edit?'编辑仓库':'新增仓库'"
    width="500"
    :before-close="handleClose"
  >
   <el-row :gutter="20">
    <el-form :model="disForm"  style="max-width: 800px">
    <el-col :span="24">
      <el-form-item >
      <el-input v-model="disForm.name" placeholder="仓库名称" />
    </el-form-item>
    </el-col>
    <el-col :span="24">
         <el-form-item>
      <el-input v-model="disForm.cityName" placeholder="所在城市" />
    </el-form-item>
    </el-col>
    <el-col :span="24">
        <el-form-item>
      <el-input v-model="disForm.address" placeholder="详细地址" />
    </el-form-item>
    </el-col>
    <el-col :span="24">
      <el-form-item >
      <el-input v-model="disForm.location" placeholder="经纬度" />
    </el-form-item>
    </el-col>
    <el-col :span="24">
         <el-form-item>
      <el-input v-model="disForm.provinceName" placeholder="省份名称" />
    </el-form-item>
    </el-col>
     <el-col :span="24">
         <el-form-item>
      <el-input v-model="disForm.create_by" placeholder="创建人" />
    </el-form-item>
    </el-col>
      <el-col :span="24">
         <el-form-item>
      <el-input v-model="disForm.personChargeName" placeholder="负责人" />
    </el-form-item>
    </el-col>
 
    
        </el-form>
  </el-row>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="save()">保存</el-button>
        <el-button type="primary" @click="dialogVisible=false">
          取消
        </el-button>
      </div>
    </template>
  </el-dialog>

  <!--分页查询-->
  <div class="demo-pagination-block">
    <el-pagination
      v-model:current-page="currentPage"
      v-model:page-size="pageSize"
      :page-sizes="[10, 20, 30, 40]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
  </div>
</template>

<style>
.warehouse-background{
   min-height: 100vh;
  padding: 20px;
}
</style>